<template>
  <div class="earth-container">
    <!-- 浮动文本 -->
    <div class="belt-speed-label">
      {{ act.micrologix1400.MicrologixT.M_N7_1 }} 
    </div>

    <!-- SVG 图标 -->
    <EarthIcon ref="svgRef" class="earth-svg" />

    <!-- 弹窗 -->
    <teleport to="body">
      <div v-if="showModal" class="modal-overlay" @click.self="closeModal">
        <div class="modal-content">
          <component :is="currentComponent" />
          <button class="close-btn" @click="closeModal">关闭</button>
        </div>
      </div>
    </teleport>
  </div>
</template>


<script setup lang="ts">
import { ref, onMounted, watch, shallowRef, nextTick } from "vue";
import EarthIcon from "../../../assets/alram.svg";
import { applyAnimations, clearAllAnimations } from "../../animationManager";
import { act, sendDataFromButton} from "../../websocket";
// svg 元素引用
const svgRef = ref<InstanceType<typeof EarthIcon>>();

// 接收属性
const props = defineProps({
  runEarth: { type: Boolean, default: true },
  speed: { type: Number, default: 0 },
});

// 弹窗状态与组件控制
const showModal = ref(false);
const currentComponent = shallowRef(null);

// 打开弹窗，并动态加载目标组件
const openModal = async (componentName: string) => {
  try {
    showModal.value = true; // 先触发弹窗显示

    // 等待弹窗 DOM 更新和布局稳定
    await nextTick();
    await new Promise((resolve) => setTimeout(resolve, 0)); // 插入微任务队列间隙

    // 动态加载组件
    const module = await import(`../../windows/${componentName}.vue`);
    currentComponent.value = module.default;

    // 添加额外延迟确保动画完成（根据实际动画时长调整）
    setTimeout(() => {
      const threeComp = currentComponent.value as any;
      threeComp?.forceResize?.();
    }, 300); // 对应 scaleUp 动画的 0.3s 时长
  } catch (err) {
    console.error("组件加载失败:", err);
    showModal.value = false;
  }
};

// 关闭弹窗
const closeModal = () => {
  showModal.value = false;
  currentComponent.value = null;
};

// 初始化
onMounted(() => {
  const svg = svgRef.value!.$el as SVGSVGElement;

  svg.addEventListener("click", (event: MouseEvent) => {
    const target = event.target as SVGElement;

    // 忽略点击 svg 空白区域本体
    if (target === svg) {
      return; // 点到空白处，不做任何操作
    }

    console.log("点击了具体图形元素:", target.tagName);
    // sendDataFromButton();
    console.log(act)
    // openModal('CanvasSvgAAA');
  });

  // 自转动画
  applyAnimations(svg, act.micrologix1400.MicrologixT.b3_17);
  
});

watch(
  () => act.micrologix1400.MicrologixT.b3_17,
  (newVal) => {
    const svg = svgRef.value!.$el as SVGSVGElement;
    newVal ? applyAnimations(svg, true) : clearAllAnimations(svg);
  }
);
</script>

<style scoped>
.earth-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
  position: relative; /* 新增定位上下文 */
}

.earth-svg {
  transform-origin: center;
  display: block;
}
/* 浮动文字样式 */
.belt-speed-label {
  position: absolute;
  top: 35px;       /* 可调整 */
  left: 175px;      /* 可调整 */
  color: #ffffff;
  font-size: 20px;
  pointer-events: none; /* 不影响 SVG 交互 */
  z-index: 10;
}
/* 弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  backdrop-filter: blur(5px); /* 毛玻璃效果 */
  animation: fadeIn 0.3s ease;
}

.modal-content {
  position: relative;
  width: 50vw; /* 视口宽度的50% */
  height: 50vh; /* 视口高度的50% */
  min-width: 300px; /* 最小尺寸限制 */
  min-height: 300px;
  background: linear-gradient(145deg, #d19851, #f8f5f2);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  padding: 24px;
  display: flex;
  flex-direction: column;
  animation: scaleUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  overflow: hidden;
  position: absolute; /* 改为绝对定位避免父级影响 */
  contain: strict; /* 启用contain严格模式 */
  box-sizing: border-box; /* 确保padding不影响尺寸计算 */
}

.close-btn {
  align-self: flex-end;
  padding: 8px 20px;
  background: #4a90e2;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: auto; /* 自动顶部外边距将按钮推到底部 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.close-btn:hover {
  background: #357abd;
  transform: translateY(-1px);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}
.module {
  pointer-events: none; /* 禁用容器响应，让 SVG 自己决定 */
}
.module svg {
  pointer-events: visiblePainted; /* 只让图形响应 */
}
/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes scaleUp {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .modal-content {
    width: 80vw;
    height: 60vh;
    z-index: 9999; /* 永远最高 */
  }
}
</style>
